<template>
  <div class="zx-cardS">
    <div class="cardS-bg">
      <div class="caption">
        <h4>{{title}}</h4>
        <div class="cardS-label" :class="cardType?'':'no-data'">{{cardType}}</div>
      </div>
      <div class="card-detail">
        <div class="type">
          <!--<span v-html="currency+ (currency!=''&&accountType!=''?' | ':'')+ accountType"></span>-->
          <p>{{currency}}</p>
          <p v-if="currency!=''&&accountType!=''" class="border"></p>
          <p>{{accountType}}</p>
        </div>
        <div class="card-No">1111 **** 1111</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'zxButton',
  props: {
    cardType: {
      type: String,
      default: '默认卡'
    },
    cardSNo: {
      type: String,
      default: '1234 **** 1234'
    },
    currency: {
      type: String,
      default: '人民币'
    },
    accountType: {
      type: String,
      default: 'I类户'
    },
    title: {
      type: String,
      default: '两地一本通'
    }
  },
  data () {
    return {
      nowCur: 0,
      butTypea: 'primary',
      butTypeB: 'default'
    }
  },
  methods: {
  },
  mounted: function () { }
}
</script>
<style lang="less">
.zx-cardS {
  width: 100%;
  padding: .16rem .32rem;
  .cardS-bg {
    width: 6.78rem;
    padding: .26rem .32rem;
    margin: 0 auto;
    background-image: url('../../assets/img/cardBgm.png');
    -webkit-background-size: 100% auto;
    background-size: 100% 100%;
    color: #fff;
    .caption {
      display: flex;
      justify-content:space-between;
      align-items: center;
      font-size: 0.32rem;
      .cardS-label {
        font-size: .2rem;
        padding: .01rem .06rem;
        border: .02rem solid #fff;
        border-radius: .08rem;
        &.no-data {
          border: none;
        }
      }
    }
    .card-detail {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: .2rem;
      .type {
        display: flex;
        align-items: center;
        font-size: .24rem;
        vertical-align: middle;
        .border {
          position: relative;
          top: -.01rem;
          height: .26rem;
          margin: 0 .16rem;
          border-right: .02rem solid #fff;
        }
      }
      .card-No {
        font-size: .32rem;
      }
    }
  }
}
</style>
